<template>
  <!-- <div>
        main----layout
    </div> -->
  <el-container class="contain_a">
    <el-header class="header">Header</el-header>
    <el-container class="contain_b">
      <el-aside class="contain_aside">
        <!-- <el-radio-group v-model="isCollapse">
          <el-radio-button :label="false">expand</el-radio-button>
          <el-radio-button :label="true">collapse</el-radio-button>
        </el-radio-group> -->
        <el-switch v-model="isCollapse" :width="10" />
        <el-menu default-active="/layout/resume" router class="el-menu-vertical-demo dark-mode" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose">
          <el-menu-item index="/layout/resume">
            <el-icon><icon-menu /></el-icon>
            <template #title>简历制作</template>
          </el-menu-item>
          <el-menu-item index="/layout/finance">
            <el-icon><Histogram /></el-icon>
            <!-- <el-icon><icon-menu /></el-icon> -->
            <template #title>两融开源</template>
          </el-menu-item>
          <el-sub-menu disabled index="1" popper-class="dark-mode">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>暂未开放</span>
            </template>
            <el-menu-item-group>
              <template #title><span>Group One</span></template>
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title><span>item four</span></template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <!-- <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <template #title>Navigator Three</template>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main class="maincontent">
        <router-view />
      </el-main>
    </el-container>
    <el-footer class="footer">footer</el-footer>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import {
  Menu as IconMenu,
  Histogram
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style lang="less" scoped>
.header {
  background: linear-gradient(to right,#000000,#42b783);
  color: #fff;
}

.contain_a {
  height: 100%;

  .contain_b {
    height: 100%;

    .contain_aside {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      // flex-shrink:unset;
      height: 100%;
      width: fit-content;
      .el-menu{
        border-right: none;
      }
    }

    .maincontent {
      height: 100%;
      width: 100%;
      background-color: #f1f1f1;
      // background: linear-gradient(to right,#eee,#b1e1cc);
    }
  }
}

.footer {
  background: linear-gradient(to right,#000,#42b783);
}

.el-menu-vertical-demo {
  flex: 1;
  max-width: 180px;
  height: 100%;
}
</style>
